import React from 'react'
import axios from 'axios'
import Header from '../components/Header'
import Footer from '../components/Footer'
import Productionintro from '../components/detailcomponents/Productionintro'
import {commentMockData} from '../mock/comments'
import {Productioncomment} from '../components/detailcomponents/Productioncomment'

import { Row, Col, Divider, Typography, Anchor, Menu } from 'antd'
class Detail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            b: 1,
            data1: '',
            data2: []
        }
        console.log('detail props', props)
    }

    a = (e) => {

    }

    // 生命周期 
    componentDidMount() {
        console.log('detail 生命周期 componentDidMount')
        axios({
            url: 'http://localhost:3003/globaltravel',
            method: 'get',
            params: {
                id: this.props.match.params.travelid
            }
        }).then(res => {
            console.log('res', res)
            this.setState({
                data1: res.data.data2,
                data2: res.data.data2.touristRoutePictures
            }, () => {
                console.log('res2 data1', this.state.data1)
                console.log('res2 data2', this.state.data2)
            })
        }).catch(error => {
            console.log('err')
        })
    }

    render() {
        return (
            <div>
                <Header></Header>
                <div className='page-content'>
                    {/* 1 产品简介 */}
                    <div className='product-intro-container '>
                        <Row>
                            <Col span={15}>
                                {/* 模拟vue中的watch等数据过来 */}
                                {
                                    this.state.data1 ? (
                                        <Productionintro
                                            title={this.state.data1.title}
                                            price={this.state.data1.price}
                                            shorprice={this.state.data1.originalPrice}
                                            discount={this.state.data1.discountPresent}
                                            rating={this.state.data1.rating}
                                            pictures={this.state.data2.map((p) => p.url)}
                                        ></Productionintro>
                                    ) : <div></div>
                                }

                            </Col>
                            <Col span={9}>

                            </Col>
                        </Row>
                    </div>
                    {/* 锚点跳转精准页面 */}
                    <div className='product-detail-anchor'>
                        {/* horizontal 能让 Anchor.Link横排显示 */}
                        {/* 里面的menu部分可以保证  里面的LINK元素横排显示 
                            外面的Anchor能保证  真的可以锚点链接
                        */}
                        <Anchor className='product-detail-anchor'>
                            <Menu mode={'horizontal'}  >
                                <Menu.Item key='1'>
                                    <Anchor.Link title='产品特色' href="#feature">

                                    </Anchor.Link>
                                </Menu.Item>
                                <Menu.Item key='2'>
                                    <Anchor.Link title='费用' href="#fees">

                                    </Anchor.Link>
                                </Menu.Item>
                                <Menu.Item key='3'>
                                    <Anchor.Link title='预定通知' href="#notes">

                                    </Anchor.Link>
                                </Menu.Item>
                                <Menu.Item key='4'>
                                    <Anchor.Link title='评价' href="#comments">

                                    </Anchor.Link>
                                </Menu.Item>

                            </Menu>
                        </Anchor>

                    </div>
                    {/* 产品特色 */}
                    <div id='feature' className='product-detail-container'>
                        <Divider orientation={'center'}>
                            <Typography.Title level={3}>产品特色</Typography.Title>

                        </Divider>
                        <div
                            style={{ margin: 50 }}
                            dangerouslySetInnerHTML={{ __html: this.state.data1.features }}

                        >

                        </div>
                    </div>
                    {/* 费用  价格*/}
                    <div id='fees' className='product-detail-container'>
                        <Divider orientation={'center'}>
                            <Typography.Title level={3}>费用</Typography.Title>

                        </Divider>
                        <div
                            style={{ margin: 50 }}
                            dangerouslySetInnerHTML={{ __html: this.state.data1.fees }}

                        >

                        </div>

                    </div>
                    {/* 预定通知 */}
                    <div id='notes' className='product-detail-container'>
                        <Divider orientation={'center'}>
                            <Typography.Title level={3}>预定须知</Typography.Title>

                        </Divider>
                        <div
                            style={{ margin: 50 }}
                            dangerouslySetInnerHTML={{ __html: this.state.data1.notes }}

                        >

                        </div>
                    </div>
                    {/* 用户评价列表渲染 */}
                    <div id='comments' className='product-detail-container'>
                        <Divider orientation={'center'}>
                            <Typography.Title level={3}> 评价</Typography.Title>

                        </Divider>

                        {/* 这里写一个评价的一个组件 */} 

                        <div style={{margin:40}}>
                            {/* 要求 把刚才的那几条数据给 mongodb数据库里面  然后本页面 componentDidMount 然后axios
                                去请求  评论列表  8条以上  写个接口 接口之后 再把数据 给到当前组件
                            */}
                             <Productioncomment data={commentMockData}></Productioncomment>
                        </div>

                    </div>
                </div>
                <Footer></Footer>
            </div>
        )
    }
}



export default Detail;